<template>
  <van-nav-bar left-arrow title="测验报告" fixed @click-left="onClickLeft" />

  <div class="evaluate-report">
    <div class="top">
      <img :src="logoRef" alt="" />
      <div>
        <span>{{ report.realName }}</span
        ><span>心理测评报告</span>
      </div>
    </div>
    <div class="date">
      <span>测评日期：</span><span>{{ report.startDate }}</span>
    </div>
    <div class="date">
      <span>测评结果：</span>
    </div>
    <div class="score">
      <div>
        <van-col span="8">因子名称</van-col>
        <van-col span="7">标准分</van-col>
        <van-col span="9">结果</van-col>
      </div>
      <div v-for="(item, index) of report.factorList" :key="index">
        <van-col span="8">{{ item.factorName }}</van-col>
        <van-col class="name-score" span="7">{{ item.score }}</van-col>
        <van-col span="9">{{ item.totalRemark }}</van-col>
      </div>
    </div>
    <div
      v-for="(item, index) of report.factorList"
      :key="index"
      class="factor-wrapper"
    >
      <div class="factor">【{{ item.factorName }}】</div>
      <div class="content">
        <div class="explain">
          <span>得分：{{ item.score }}，</span
          ><span>结果：{{ item.totalRemark }}</span>
        </div>
        <div class="explain">得分解释:</div>
        <div class="suggest" v-html="item.explainRemark"></div>
        <div class="explain">辅导建议:</div>
        <div class="suggest" v-html="item.suggest"></div>
      </div>
    </div>
    <div class="introduction">项目介绍</div>
    <p>{{ report.introduce }}</p>
    <div class="footer">
      <img src="../../assets/icon/none.png" alt="" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import axios from '../../api/axios'
import logo from './img/logo.png'
import { useBack } from '/@/use/useRouteBack'

const props = defineProps({
  userProjectId: {
    type: String,
    default: '',
  },
  isBackRouter: {
    type: Number,
    default: 0,
  },
})

type PropsType = typeof props

const { report } = useReport(props)

const router = useRouter()

const logoRef = ref(logo)

function useReport(props: PropsType) {
  const report = ref<any>({})

  watch(
    () => props.userProjectId,
    async (userProjectId) => {
      const { data } = await axios.get(
        '/api/blade-measure/measure/report/personal',
        { params: { id: userProjectId } }
      )
      report.value = data.data
    },
    {
      immediate: true,
    }
  )

  return {
    report,
  }
}
const { back } = useBack()

function onClickLeft() {
  if (props.isBackRouter) {
    back()
  } else {
    router.push({ name: 'Classify' })
  }
}
</script>

<style lang="less" scoped>
.evaluate-report {
  margin: 46px 0px 46px 0px;
  background-color: white;
  padding: 0 10px;
  color: #646566;

  .factor {
    font-size: 14px;
    margin-top: 30px;
    background: url('./img/bg.png') no-repeat;
    background-size: 100% 100%;
    width: 220px;
    padding: 3px;
    color: white;
  }

  .content {
    padding: 0 20px;

    .explain {
      font-size: 13px;
      margin-bottom: 5px;
      color: rgb(167, 147, 132);
      margin-top: 15px;
      font-weight: bold;
    }

    .suggest {
      font-size: 12px;
      display: inline-block;
    }
  }

  .introduction {
    text-align: center;
    font-size: 15px;
    color: white;
    background: rgb(71, 146, 197);
    padding: 8px 0;
    margin: 20px 0;
  }

  p {
    font-size: 12px;
    padding: 0 20px;
    word-break: break-word;
  }
}

.top {
  padding: 30px 0;
  padding-bottom: 0px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  img {
    width: 110px;
  }

  div {
    width: 60vw;
    background: rgb(71, 141, 197);
    text-align: center;
    padding: 3px 5px;
    color: white;
    display: flex;
    justify-content: space-around;

    span {
      width: 50%;
    }
  }
}

.date {
  font-size: 13px;
  margin: 10px 0;
}

.score {
  font-size: 13px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(71, 141, 197);
  > div {
    display: flex;
    justify-content: space-between;
    padding: 4px 20px;
    margin-top: 2px;

    .name-score {
      color: orange;
    }
  }

  > div:nth-child(2n) {
    background-color: rgb(243, 247, 249);
  }

  > div:first-child {
    font-weight: bold;
  }
}

.footer {
  text-align: center;
  padding: 20px 0;
  border-top: 1px solid rgb(71, 146, 197);
  margin-top: 40px;

  img {
    width: 70px;
  }
}
</style>
